<template>
  <div class="main-pre">
    <div class="main-left">
      <p class="title">虚拟仿真技术在动画镜头语言中的应用</p>
      <div class="btns">
        <el-button type="info" @click="$router.push('/experiment/comment')"
        >讨论区<i class="el-icon-upload el-icon--right"></i
        ></el-button>
        <el-button type="info" icon="el-icon-search">申报年份2019</el-button>
      </div>
      <ul class="tags" style="white-space: nowrap">
        <li>所属专业类：艺术学类</li>
        <li>对应专业：动画</li>
        <li>课程类型：专业必修课</li>
        <li>实验类型：综合设计型</li>
      </ul>
      <div class="infos">
        <p style="font-size:14px;color:#fff">
          镜头语言通常是视听语言理论中的一部分，学生通常是死记硬背，很难深刻理解。而专业的摄影设备无法满足大量学生的需求。在当前的实验条件下，本项目采用虚拟仿真实验，利用三维技术、虚拟现实技术等构建的“虚拟影棚”为学生创造真实的体验。
        </p>
      </div>
      <el-button type="primary" size="medium" @click="goExperiment"
      >开始做实验
      </el-button
      >
      <el-dialog title="开始下载软件进行操作！" :visible="showDialog" width="28%" @close="closeDialog">
        <el-card style="height:380px">
          <img src="../../assets/img/exe.png" alt="">
        </el-card>

      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getToken} from '@/request/auth'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    goExperiment() {
      const token = getToken()

      if (token) {
        this.showDialog = true

      } else {
        this.$message("请先登录在开始做实验")
      }

    },
    closeDialog() {
      this.showDialog = false
    }
  },
};
</script>

<style scoped>
.main-pre {
  height: 300px;
  width: 100%;
  display: flex;
  /* padding: 0 100px; */
}

.main-left {
  background: radial-gradient(
      ellipse at center,
      rgba(116, 69, 103, 1) 0%,
      rgba(116, 69, 103, 1) 22%,
      rgba(106, 65, 102, 1) 35%,
      rgba(86, 60, 93, 1) 46%,
      rgba(47, 58, 89, 1) 66%,
      rgba(47, 58, 89, 1) 100%
  );
  /* height: 380px; */
  width: 100%;
  padding-left: 100px;
}

.title {
  font-size: 24px;
  color: white;
  font-weight: 600;
}

.tags {
  font-size: 14px;
  display: flex;
  width: 100%;
  color: #fff;
  opacity: 0.5;
  margin-left: -2px;
  margin-top: 15px;
  line-height: 20px;
}

.main-right {
  width: 40%;
  background-color: #2f3a59;
  padding-top: 60px;
  padding-left: 76px;
}

img {
  width: 100%;
  height: 380px;
}
</style>